<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<title>Viewer</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;

			}

			a { color: skyblue }
			.button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
			.highlight { background:orange; color:#fff; }

			span {
				display: inline-block;
				width: 60px;
				float: left;
				text-align: center;
			}

		</style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
		<script src="js/three.js/three.min.js"></script>

        <script src="js/loader/TrackballControls.js"></script>
		<script src="js/loader/STLLoader.js"></script>

		<script src="js/Detector.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var mouse = new THREE.Vector2();
			var container, stats;
			var camera, scene, projector, renderer;
			var objects = [];
			var loader;
			var mesh;
			var light1;
			//var material = new THREE.MeshPhongMaterial({ ambient: 0x555555, color: 0xAAAAAA, specular: 0x111111, shininess: 200 });
			var material = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide });
			loader = new THREE.STLLoader();
			loader.addEventListener('load', function (event) {

			    var geometry = event.content;

                if (mesh != null) {
                    scene.remove(mesh);
                }

                if (objects.length > 0) {
                    objects.pop(mesh);
                }
			    
			    mesh = new THREE.Mesh(geometry, material);

			    mesh.updateMatrix();
			    mesh.castShadow = true;
			    mesh.receiveShadow = true;

			    var boundingBox = mesh.geometry.boundingBox.clone();
			    var centrePoint = new THREE.Vector3();
			    centrePoint.setX((boundingBox.min.x + boundingBox.max.x) / 2);
			    centrePoint.setY((boundingBox.min.y + boundingBox.max.y) / 2);
			    centrePoint.setZ((boundingBox.min.z + boundingBox.max.z) / 2);

			    var maxBoundary = boundingBox.max.x - boundingBox.min.x;
			    if ((boundingBox.max.y - boundingBox.min.y) > maxBoundary)
			        maxBoundary = boundingBox.max.y - boundingBox.min.y;
			    if ((boundingBox.max.z - boundingBox.min.z) > maxBoundary)
			        maxBoundary = boundingBox.max.z - boundingBox.min.z;

			    //mesh.scale.set(scaleRate, scaleRate, scaleRate);
			    mesh.position.set(-centrePoint.x, -centrePoint.y, -centrePoint.z);

			    camera.position.set(0, 0, maxBoundary);
			    objects.push(mesh);
			    scene.add(mesh);
			});

			init();
			loadFile();
			animate();

			var loadModel = false;
			function loadFile() {
		        loader.load('<s:property value="filePath" escape="false"/>');
			}

			function onDocumentMouseMove(event) {

			    event.preventDefault();
			    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
			    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

			    //

			    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
			    projector.unprojectVector(vector, camera);

			    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

			    var intersects = raycaster.intersectObjects(objects);

			    if (intersects.length > 0) {
			        container.style.cursor = 'pointer';
			    } else {
			        container.style.cursor = 'auto';
			    }

			}

			function init() {

			    container = document.createElement('div');
			    container.id = "webglContainer";
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 15000 );

				controls = new THREE.TrackballControls(camera);

				controls.rotateSpeed = 5.0;
				controls.zoomSpeed = 5;
				controls.panSpeed = 2;

				controls.noZoom = false;
				controls.noPan = true;

				controls.staticMoving = true;
				controls.dynamicDampingFactor = 0.3;

				scene = new THREE.Scene();

				scene.add(camera);

	            // lights
				var dirLight = new THREE.DirectionalLight(0xffffff);
				dirLight.position.set(200, 200, 200).normalize();

				camera.add(dirLight);
				camera.add(dirLight.target);

				projector = new THREE.Projector();
				// renderer

				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } );
				renderer.setSize( window.innerWidth, window.innerHeight );

				renderer.setClearColor( 0x000000, 1);
				renderer.shadowMapCullFace = THREE.CullFaceBack;

				container.appendChild( renderer.domElement );

				window.addEventListener('resize', onWindowResize, false);
				renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth, window.innerHeight);
				controls.handleResize();

			}

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			function render() {

				controls.update();
				renderer.render( scene, camera );

			}

		</script>
</body>
</html>